<!DOCTYPE html>
<html>
  <head>
    <title>成绩表</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var pageNo=1;
		var totalpages=1;
		var $tab=$("#exam");
		function load(){
				$tab.find("tr:gt(0)").remove();
				$.get("examJsonServlet",{p:pageNo},function(data){
				totalpages=data.totalPages;
				$.each(data.datas,function(i,d){
					$tab.append("<tr><td>"+d.id+"</td><td>"+d.stId+"</td><td>"+d.sbId+"</td><td>"+d.score+"</td><td>"+d.examDate+"</td><td>"+d.examName+"</td></tr>");
				});
				$("#pager #now").text(pageNo);
			});
		}
		load();
		$("#pager #next").click(function(){
			if(pageNo>=totalpages)
				return;
			pageNo++;
			load();
			return false;
		});
		$("#pager #prev").click(function(){
			if(pageNo<=1)
				return; 
			pageNo--;
			load();
			return false;
		});
		$("#pager #first").click(function(){
			pageNo=1;
			load();
			return false;
		});
		$("#pager #last").click(function(){
			pageNo=totalpages;
			load();
			return false;
		});
	});
	</script>
	
  </head>
  
  <body>
   	<table id="exam" border="1" align="center" width="80%">
   	<tr><td>编号</td><td>学号</td><td>课程号</td><td>成绩</td><td>考试时间</td><td>考试类型</td></tr>
   	</table>
   	<p align="center" id="pager">
   	<a href="javascript:void(0)" id="first">首页</a>&nbsp;
   	
   	<a href="javascript:void(0)" id="prev">上一页</a>&nbsp;
   		<span id="now">1</span>
   	&nbsp;<a id="next" href="javascript:void(0)">下一页</a>
   	&nbsp;<a id="last" href="javascript:void(0)">末页</a>
   	</p>
  </body>
</html>
